<template>
  <div class="dashboard-container">
    <div class="header">
      <h2>基本信息</h2>
    </div>
    <div class="summary-cards">
      <div class="card">
        <div class="card-content">
          <div class="card-title">服务单位数11111</div>
          <div class="card-value">1,256</div>
          <div class="card-change positive">
            <VtjIconArrowUp></VtjIconArrowUp>
            <span> 12.5%</span>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-content">
          <div class="card-title">服务单位数占123456比</div>
          <div class="card-value">78.3%</div>
          <div class="card-change negative">
            <VtjIconArrowDown></VtjIconArrowDown>
            <span> 2.1%</span>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-content">
          <div class="card-title">完结工单</div>
          <div class="card-value">3,456</div>
          <div class="card-change positive">
            <VtjIconArrowUp></VtjIconArrowUp>
            <span> 8.7%</span>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-content">
          <div class="card-title">平均处理时长</div>
          <div class="card-value">2.3天</div>
          <div class="card-change negative">
            <VtjIconArrowDown></VtjIconArrowDown>
            <span> 0.5天</span>
          </div>
        </div>
      </div>
    </div>
    <div class="section">
      <h3>服务人员结构</h3>
      <div class="section-content">
        <div class="chart-container">
          <XChart
            width="100%"
            height="300px"
            :option="state.ageDistributionOption"></XChart>
          <div class="chart-title">年龄分布</div>
        </div>
        <div class="chart-container">
          <XChart
            width="100%"
            height="300px"
            :option="state.genderDistributionOption"></XChart>
          <div class="chart-title">性别分布</div>
        </div>
        <div class="chart-container">
          <div class="chart-title">岗位分布</div>
        </div>
        <div class="chart-container">
          <div class="chart-title">职级构成</div>
          <div class="rank-buttons">
            <button
              v-for="(range, index) in state.rankRanges"
              :key="index"
              @click="
                (...args: any[]) => click_kj5uy6gwe({ range, index }, args)
              ">
              {{ range }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  // @ts-nocheck
  import { defineComponent, reactive } from 'vue';
  import { VtjIconArrowUp, VtjIconArrowDown } from '@vtj/icons';
  import { XChart } from '@vtj/charts';
  import { useProvider } from '@vtj/renderer';
  export default defineComponent({
    name: 'Cache',
    components: { VtjIconArrowUp, VtjIconArrowDown, XChart },
    setup(props) {
      const provider = useProvider({ id: 'h8zxbfud', version: '1755247456595' });
      const state = reactive({
        rankRanges: ['L1-5', 'L6-9', 'L10-12', 'L13-16', 'L17-19'],
        userSurveyOption: {
          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
          legend: { data: ['非常满意', '满意', '一般', '不满意'] },
          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
          xAxis: { type: 'category', data: ['服务流程', '服务质量', '服务态度'] },
          yAxis: { type: 'value' },
          series: [
            {
              name: '非常满意',
              type: 'bar',
              stack: 'total',
              emphasis: { focus: 'series' },
              data: [45, 42, 48]
            },
            {
              name: '满意',
              type: 'bar',
              stack: 'total',
              emphasis: { focus: 'series' },
              data: [35, 38, 32]
            },
            {
              name: '一般',
              type: 'bar',
              stack: 'total',
              emphasis: { focus: 'series' },
              data: [15, 14, 12]
            },
            {
              name: '不满意',
              type: 'bar',
              stack: 'total',
              emphasis: { focus: 'series' },
              data: [5, 6, 8]
            }
          ]
        },
        satisfactionAspects: ['服务流程', '服务质量', '服务态度'],
        completionTimeOption: {
          tooltip: { trigger: 'axis' },
          legend: { data: ['平均办结时长'] },
          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
          },
          yAxis: { type: 'value' },
          series: [
            {
              name: '平均办结时长',
              type: 'line',
              data: [5.2, 4.8, 4.5, 4.3, 4.1, 4.0, 3.9],
              markPoint: {
                data: [
                  { type: 'max', name: '最大值' },
                  { type: 'min', name: '最小值' }
                ]
              },
              markLine: { data: [{ type: 'average', name: '平均值' }] }
            }
          ]
        },
        processingTimeOption: {
          tooltip: { trigger: 'axis' },
          legend: { data: ['平均处理时长'] },
          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
          },
          yAxis: { type: 'value' },
          series: [
            {
              name: '平均处理时长',
              type: 'line',
              data: [3.2, 2.8, 2.5, 2.3, 2.1, 2.0, 1.9],
              markPoint: {
                data: [
                  { type: 'max', name: '最大值' },
                  { type: 'min', name: '最小值' }
                ]
              },
              markLine: { data: [{ type: 'average', name: '平均值' }] }
            }
          ]
        },
        serviceSupportOption: {
          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
          legend: { data: ['完结工单', '在途工单', '延期工单'] },
          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
          xAxis: {
            type: 'category',
            data: ['技术支持', '客户服务', '运营管理', '产品研发', '市场销售']
          },
          yAxis: { type: 'value' },
          series: [
            { name: '完结工单', type: 'bar', data: [320, 332, 301, 334, 390] },
            { name: '在途工单', type: 'bar', data: [120, 132, 101, 134, 90] },
            { name: '延期工单', type: 'bar', data: [20, 32, 21, 34, 30] }
          ]
        },
        ageDistributionOption: {
          tooltip: { trigger: 'item' },
          series: [
            {
              name: '年龄分布',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: { show: false, position: 'center' },
              emphasis: {
                label: { show: true, fontSize: '18', fontWeight: 'bold' }
              },
              labelLine: { show: false },
              data: [
                { value: 1048, name: '20-30岁' },
                { value: 735, name: '30-40岁' },
                { value: 580, name: '40-50岁' },
                { value: 484, name: '50岁以上' }
              ]
            }
          ]
        },
        rankCompositionOption: {
          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
          legend: { data: ['L1-5', 'L6-9', 'L10-12', 'L13-16', 'L17-19'] },
          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
          xAxis: {
            type: 'category',
            data: ['技术支持', '客户服务', '运营管理', '产品研发', '市场销售']
          },
          yAxis: { type: 'value' },
          series: [
            {
              name: 'L1-5',
              type: 'bar',
              stack: 'total',
              label: { show: true },
              emphasis: { focus: 'series' },
              data: [12, 23, 15, 8, 5]
            },
            {
              name: 'L6-9',
              type: 'bar',
              stack: 'total',
              label: { show: true },
              emphasis: { focus: 'series' },
              data: [22, 34, 28, 15, 10]
            },
            {
              name: 'L10-12',
              type: 'bar',
              stack: 'total',
              label: { show: true },
              emphasis: { focus: 'series' },
              data: [35, 45, 32, 25, 15]
            },
            {
              name: 'L13-16',
              type: 'bar',
              stack: 'total',
              label: { show: true },
              emphasis: { focus: 'series' },
              data: [15, 40, 20, 20, 10]
            },
            {
              name: 'L17-19',
              type: 'bar',
              stack: 'total',
              label: { show: true },
              emphasis: { focus: 'series' },
              data: [5, 14, 7, 10, 5]
            }
          ]
        },
        businessHandlingOption: {
          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
          legend: { data: ['已办结流程', '异常审批流程'] },
          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
          xAxis: {
            type: 'category',
            data: ['开户', '销户', '变更', '查询', '投诉']
          },
          yAxis: { type: 'value' },
          series: [
            { name: '已办结流程', type: 'bar', data: [320, 332, 301, 334, 390] },
            { name: '异常审批流程', type: 'bar', data: [20, 32, 21, 34, 30] }
          ]
        },
        satisfactionRateOption: {
          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
          xAxis: { type: 'value' },
          yAxis: {
            type: 'category',
            data: ['开户', '销户', '变更', '查询', '投诉']
          },
          series: [
            {
              name: '满意率',
              type: 'bar',
              data: [95, 92, 89, 96, 85],
              label: { show: true, position: 'right' }
            }
          ]
        },
        genderDistributionOption: {
          tooltip: { trigger: 'item' },
          series: [
            {
              name: '性别分布',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1048, name: '男' },
                { value: 735, name: '女' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        positionDistributionOption: {
          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
          grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
          xAxis: { type: 'value', boundaryGap: [0, 0.01] },
          yAxis: {
            type: 'category',
            data: ['技术支持', '客户服务', '运营管理', '产品研发', '市场销售']
          },
          series: [{ name: '人数', type: 'bar', data: [89, 156, 102, 78, 45] }]
        }
      });
      return { state, props, provider };
    },
    methods: {
      click_kj5uy6gwe({ range, index }, args) {
        return (($event) => {
          this.changeRankRange(range);
        }).apply(this, args);
      },
      changeRankRange(range) {
        console.log('切换职级范围:', range);
      },
      changeSatisfactionAspect(aspect) {
        console.log('切换满意度方面:', aspect);
      }
    }
  })
</script>
<style lang="css" scoped>
  .dashboard-container {
    padding: 20px;
    background-color: #f5f7fa;
  }
  .header {
    margin-bottom: 20px;
  }
  .header h2 {
    font-size: 24px;
    color: #333;
  }
  .summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
  }
  .card {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .card-content {
    display: flex;
    flex-direction: column;
  }
  .card-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
  }
  .card-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }
  .card-change {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .card-change.positive {
    color: #f56c6c;
  }
  .card-change.negative {
    color: #67c23a;
  }
  .section {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .section h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
  }
  .section-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .chart-container {
    position: relative;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 10px;
  }
  .chart-title {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 14px;
    color: #666;
  }
  .rank-buttons,
  .satisfaction-buttons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    gap: 10px;
  }
  .rank-buttons button,
  .satisfaction-buttons button {
    padding: 5px 10px;
    background-color: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
  }
  .rank-buttons button:hover,
  .satisfaction-buttons button:hover {
    background-color: #ecf5ff;
    border-color: #c6e2ff;
    color: #409eff;
  }
</style>
